<template>
  <el-dialog
    title="宠物信息详情"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      ref="addForm"
      v-model="form"
      :option="tableOption"
    >
      <template slot="nickName">
        <span>{{ form.nickName }}</span>
        <!-- todo2 -->
        <span
          v-if="form.formerName"
          class="cengjing-name"
        >
          (曾用名:{{ form.formerName }})
        </span>
      </template>
      <template #tag>
        <div class="tags">
          <div class="flex mb-20">
            <span class="tags-title">性格：</span>
            <div>
              <template v-for="(v, k) in form.personality">
                <span
                  :key="k"
                  class="tags-item"
                >
                  {{ v.value || '暂无' }}
                </span>
              </template>
            </div>
          </div>
          <div class="flex mb-20">
            <span class="tags-title">绝技：</span>
            <div>
              <template v-for="(v, k) in form.skill">
                <span
                  :key="k"
                  class="tags-item"
                >
                  {{ v.value || '暂无' }}
                </span>
              </template>
            </div>
          </div>
          <div class="flex mb-20">
            <span class="tags-title">食物品牌：</span>
            <div>
              <template v-for="(v, k) in form.diet">
                <span
                  :key="k"
                  class="tags-item"
                >
                  {{ v.value || '暂无' }}
                </span>
              </template>
            </div>
          </div>
          <div class="flex mb-20">
            <span class="tags-title">声音：</span>
            <div>
              <audio
                controls
                style="height: 40px"
              >
                <source :src="form.sound" />
                您的浏览器不支持 audio 元素。
              </audio>
            </div>
          </div>
        </div>
      </template>
    </avue-form>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { tableOption } from '@/const/crud/customer/pet-detail';
import { getObj } from '@/api/core/pet-file';
export default {
  name: 'Detail',
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableOption: tableOption(),
      feature: ['黏人乖巧', '傲娇', '乖巧'],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible() {
      this.id && this.getDetail();
    },
  },
  methods: {
    async getDetail() {
      const res = await getObj(this.id);
      this.form = { ...res.data.data };
      this.form.personality = JSON.parse(this.form.personality);
      this.form.skill = JSON.parse(this.form.skill);
      this.form.diet = JSON.parse(this.form.diet);
    },
  },
};
</script>

<style lang="scss" scoped>
.tags-item {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid rgba(161, 216, 230, 1);
  color: rgba(161, 216, 230, 1);
  margin-right: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.tags-title {
  width: 80px;
  text-align: right;
}
.cengjing-name {
  font-size: 18px;
  margin-left: 10px;
  display: inline-block;
}
</style>
